import React from 'react';
import { Carousel } from 'antd';
import 'antd/dist/antd.css';
import shouyecss from './css/shouye.module.css'
import Info from "../pages/info/info.jsx"

function Index(props) {
    const contentStyle = {
        width:'941px',
        height: '500px',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
    };
    return (
        <div className={shouyecss.content}>
            <div className={shouyecss.banner}>
                <div className={shouyecss.home_banner}>
                    <div className={shouyecss.banner_left}>
                        <div className={shouyecss.left1}>
                            <div className={shouyecss.category}>
                            <p>编辑推荐</p>
                            <hr className={shouyecss.border}/>
                             </div>
                        </div>
                        <div className={shouyecss.left2}>
                            品牌星球 2020 年度值得关注的 100 个新消费品牌
                        </div>
                        <div className={shouyecss.left3}>
                            <div className={shouyecss.article_author}>
                                <div className={shouyecss.author}>
                                    <img src="https://media.brandstar.com.cn/uploads/profile/%E5%93%81%E7%89%8C%E6%98%9F%E7%90%83_Logo__%E5%93%81%E7%89%8C%E6%98%9F%E7%90%83-%E7%BA%AF%E5%9B%BE%E5%BD%A2-%E4%BB%85%E5%BD%93%E5%A4%B4%E5%83%8F%E4%BD%BF%E7%94%A8-%E9%BB%91.jpg" alt="" />
                                    <p>BrandStar</p>
                                </div>
                                <div className={shouyecss.time}>2020/07/29</div>
                            </div>
                        </div>
                    </div>
                    <div className={shouyecss.home_right}>
                        <Carousel style={{width:'941px' ,height: '500px'}} autoplay>
                            <div>
                                <img src="https://media.brandstar.com.cn/uploads/article_covers/2020%E5%B9%B4%E6%B5%B7%E5%A4%96DTC%E5%93%81%E7%89%8C%E6%A6%9C%E5%8D%95-%E5%93%81%E7%89%8C%E6%98%9F%E7%90%83BrandStar.jpg" alt="" style={contentStyle}/>
                            </div>
                            <div>
                            <img src="https://media.brandstar.com.cn/uploads/article_covers/%E6%96%B0%E6%B6%88%E8%B4%B9%E5%93%81%E7%89%8C%E5%B9%B4%E5%BA%A6%E8%B6%8B%E5%8A%BF%E7%B3%BB%E5%88%97.gif" alt="" style={contentStyle}/>
                            </div>
                            <div>
                            <img src="https://media.brandstar.com.cn/uploads/article_covers/WechatIMG770_kKqoBtK.jpeg" alt="" style={contentStyle}/>
                            </div>
                            <div>
                            <img src="https://media.brandstar.com.cn/uploads/article_covers/%E5%80%BC%E5%BE%97%E5%85%B3%E6%B3%A8-0714.png" alt="" style={contentStyle}/>
                            </div>
                        </Carousel>
                    </div>
                </div>
                <div className={shouyecss.articles_banner}></div>
            </div>
            <Info></Info>
        </div>
        // <div >
        //     <Carousel autoplay>
        //         <div>
        //             <h3 style={contentStyle}>1</h3>
        //         </div>
        //         <div>
        //             <h3 style={contentStyle}>2</h3>
        //         </div>
        //         <div>
        //             <h3 style={contentStyle}>3</h3>
        //         </div>
        //         <div>
        //             <h3 style={contentStyle}>4</h3>
        //         </div>
        //     </Carousel>
        // </div>
    );
}

export default Index;